<template>
    <section class="page-wrap">
        <DetailsHeader title="积分明细" class="mb-24">
            <div class="fz-12 col-8A93A7 mr-32">当前积分: <span class="col-money">{{ form.currentScore }}</span></div>
            <div class="fz-12 col-8A93A7 mr-32">积分等级: <span class="col-money">{{ form.scoreGrade }}</span></div>
        </DetailsHeader>

        <div class="page-content">
            <a-table :dataSource="tableList" :pagination="false">
                <a-table-column key="createdAt" title="时间" data-index="createdAt" />
                <a-table-column key="subject" title="内容" data-index="subject" ellipsis="true">
                    <template #default="{ record }">
                        {{ subjectEnum[record.subject] }}
                    </template>
                </a-table-column>
                <a-table-column key="amount" title="变动" data-index="amount">
                    <template #default="{ record }">
                        {{ record.event == '1' ? '+' : record.event == '2' ? '-' : '' }} {{ record.amount }}
                    </template>
                </a-table-column>
            </a-table>
        </div>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pn" v-model:limit="queryParams.ps"
            @pagination="getList" />
    </section>
</template>

<script setup name="GpuImage">
import { reactive, ref } from 'vue'
import { getScorelistApi } from 'api/modules/api.owner'
import DetailsHeader from '@/components/common/DetailsHeader.vue'

const tableList = ref([]);
const form = ref({})
const total = ref(0)
const queryParams = ref({
    pn: 1,
    ps: 10
})

const subjectEnum = {
    'online': '机器在线',
    'rent': '机器出租',
    'interrupt': '机器中断'
}

const getList = () => {
    const params = {
        ...queryParams.value,
    }
    getScorelistApi(params).then(res => {
        tableList.value = res.data.list || []
        form.value = res.data
        total.value = res.data.total
    })
}

getList()

</script>

<style scoped lang="less">
.page-wrap {
    display: flex;
    flex-direction: column;
    height: calc(100%);
}

.page-header {
    display: flex;
    align-items: center;
    height: 64px;
    background: #ffffff;
    margin-bottom: 4px;
    padding: 0 24px;

    .page-title {
        color: #223354;
        font-family: PingFang SC;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        padding-right: 8px;
        margin-right: 8px;
    }

    .page-title::after {
        display: block;
        content: '';
        height: 5px;
        background: linear-gradient(90deg, #07F 5.32%, rgba(255, 255, 255, 0.00) 103.53%);
    }
}

.page-content {
    background: #ffffff;
}

.page-footer {
    background: #fff;
}

::v-deep(.page-content .ant-table-thead>tr>th) {
    color: #8A93A7;
    font-size: 14px;
    background: #F3F5F7;
    border: none;

    &::before {
        display: none;
    }
}
</style>
